<template>
  <div>
    <div>
      <div flex flex-a-c flex-j-c h-300rpx flex-col :style="{ 'background': gradient }">
        <div color-white text-32rpx text-center>
          可用积分
        </div>
        <div my-20rpx text-60rpx color-white font-bold>{{ userPoint.points || 0 }}</div>
        <div color-white text-24rpx>累计获得积分：{{ userPoint.totalPoint || 0 }}</div>
      </div>
      <div v-if="isShow">
        <nut-cell-group v-if="pointList.length">
          <nut-cell :title="item.content" :sub-title="item.createTime" v-for="(item, index) in pointList" :key="index">
            <template #desc>

              <div font-bold :style="{ color: item.pointType === 'INCREASE' ? colors.themeColor : colors.reduceColor }">
                <span>{{ item.pointType == "INCREASE" ? '+' : '-' }}</span>{{ item.variablePoint }}
              </div>

            </template>
          </nut-cell>
        </nut-cell-group>
        <div v-else mt-100rpx>
          <empty text="暂无积分记录" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getMemberPoints, getPoints } from '@/api/member';
import empty from '@/components/empty/index.vue';
import { colors } from '@/constants/injection-key';
import type { Search } from '@/constants/types';
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app';
const gradient = `linear-gradient(57.72deg, ${colors.disabledColor} 18.14%, ${colors.themeColor} 98.44%)`
const isShow = ref(false)
const searchForm = ref<Search>({
  pageNumber: 1,
  pageSize: 20,
})
const pointList = ref<any>([])
const pointData = ref<any>('')
const userPoint = ref<any>({
  points: 0,
  totalPoint: 0,
}) //用户积分
async function init() {
  isShow.value = false
  pointList.value = []
  searchForm.value.pageNumber = 1
  await getMemberPointData()
  await fetch()

}
async function getMemberPointData() {
  const res = await getMemberPoints()
  if (res.data.success) {
    userPoint.value = res.data.result
  }
}


async function fetch() {
  uni.stopPullDownRefresh();
  const res = await getPoints(searchForm.value)
  isShow.value = true
  if (res.data.success) {
    pointList.value.push(...res.data.result.records)
    pointData.value = res.data.result
  }
}

onPullDownRefresh(() => {
  init()
})
onReachBottom(() => {
  if (pointData.value?.total > searchForm.value.pageNumber * searchForm.value.pageSize) {
    searchForm.value.pageNumber++;
    fetch()
  }
})

onMounted(() => {
  init();
})


</script>

<style scoped lang="scss">
</style>
